<template>
	<view>
		<view class="head">
			<view class="head_main">
				<image class="card_main" src="../../static/my/card_main.png" mode=""></image>
				<view class="head_main_box">
					<view class="head_main_box_h">
						<view class="head_main_box_h_avant">
							<image class="head_portrait" :src="customer.avatar==undefined?'../../static/my/my_logo.png':customer.avatar" mode=""></image>
						</view>
						<view class="name_text ellipseHide" v-if="loginStatus">{{customer.name}}</view>
						<navigator hover-class="none" url="/pages/login/login" class="name_text" v-if="!loginStatus">点击登录</navigator>
						<navigator url="/pages/my/certification/certification" hover-class="none" class="real_name" v-if="!customer.isRealName&&loginStatus">未实名 ></navigator>
					</view>
					<view class="wallet_box" v-if="loginStatus">
						<view class="wallet_address ellipseHide">
							钱包地址：{{customer.chainAddress}}
						</view>
						<view class="copy_icon_box" @click="copy(customer.chainAddress)">
							<image class="copy_icon" src="../../static/my/copy_icon.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="content_nav">
				<view class="content_nav_box" v-for="(item,index) in navList" :key="index" @click="orderJump(index)">
					<image :src="item.img" mode=""></image>
					<text>{{item.value}}</text>
				</view>
				<image class="split_line" src="../../static/my/split_line.png" mode=""></image>
				<view class="content_nav_box" @click="orderJump(4)">
					<image src="../../static/my/qykdd.png" mode=""></image>
					<text>权益卡订单</text>
				</view>
			</view>
			<image class="advertisement" src="../../static/my/advertisement.png" mode="" v-if="loginStatus" @click="invitation"></image>
			<view class="common_functions">
				<view class="common_functions_title">常用功能</view>
				<block v-for="(item,nIndex) in functionNav" :key="nIndex">
					<view class="common_functions_nav" v-if="item.status" @click="commonFunctionsJump(item,nIndex)">
						<view class="common_functions_nav_l">
							<view class="red_dot" v-if="megReadingStatus&&nIndex==4"></view>
							<image :src="item.img" mode=""></image>
							<text>{{item.title}}</text>
						</view>
						<view class="common_functions_nav_r">
							<text>{{item.tips}}</text>
							<image src="../../static/my/function_right.png" mode=""></image>
						</view>
					</view>
				</block>
			</view>
			<view class="common_functions">
				<view class="common_functions_title">其他功能</view>
				<view class="other_function">
					<view class="other_function_nav" v-for="(item,oIndex) in otherFunctionNav" :key="oIndex" @click="otherFunctionsJump(oIndex)">
						<image :src="item.img" mode=""></image>
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
		</view>
		<invitation-tasks ref="child"></invitation-tasks>
		<!-- 自定义tabBar -->
		<view style="height: 100rpx;"></view>
		<tabBar :pagePath="'/pages/my/my'" :num="2"></tabBar>
	</view>
</template>

<script>
	const app = getApp()
	import jweixin from '@/components/jweixin-module/jsdk'
	import wechat from '@/components/jweixin-module/wechat'
	import {getOperationConfiguration} from '@/api/api-v1-2.js'
	export default {
		data() {
			return {
				navList:[ //订单nav
					{
						img:'../../static/my/dfk.png',value:'待付款'
					},
					{
						img:'../../static/my/ywc.png',value:'已完成'
					},
					{
						img:'../../static/my/yqx.png',value:'已取消'
					},
				],
				functionNav:[ //常用功能
					{
						img:'../../static/my/syjs.png',title:'神椰集市',tips:'官方资产兑换集市',status:true,url: '/pages/my/shenye-market/shenye-market',
					},
					{
						img:'../../static/my/sygc.png',title:'神椰工厂',tips:'合成&销毁数字资产',status:true,url: '/pages/syFactory/syFactory',
					},
					{
						img:'../../static/my/qklcx.png',title:'区块链信息查询',tips:'BSN官网，官方DDC查询',status:true,url:''
					},
					{
						img:'../../static/my/nfrjl.png',title:'NFR记录',tips:'NFR转赠记录查询',status:true,url: '/pages/my/NFR-record/NFR-record',
					},
					{
						img:'../../static/my/xxtz.png',title:'消息通知',tips:'官方客服消息',status:true,url: '/pages/my/news/news',
					},
				],
				otherFunctionNav:[ //其他功能
					{
						img:'../../static/my/lxkf.png',title:'联系客服'
					},
					{
						img:'../../static/my/gzgzh.png',title:'关注公众号'
					},
					{
						img:'../../static/my/gywm.png',title:'关于我们'
					},
					{
						img:'../../static/my/sz.png',title:'设置'
					},
				],
				loginStatus: false, //判断是否登录
				customer:{},//用户信息
				megReadingStatus: false,//是否有未读消息
			}
		},
		onShow() {
			// console.log(this.customer.avatar)
			// return
			if (this.$queue.getData('token') != undefined) {
				this.loginStatus = true
				this.getCustomer() //用户信息
				this.getUnreadHas() //用户是否已读消息
			} else {
				this.loginStatus = false
			}
			this.getDonationShow()
		},
		methods: {
			// 获取用户信息
			async getCustomer() {
				var res = await this.$api.getCustomer()
				this.customer = res.data
			},
			// 获取消息
			getUnreadHas() {
				this.$api.getUnreadHas().then(res => {
					this.megReadingStatus = res.data
				})
			},
			// 复制
			copy(text) {
				if (text != '') {
					var _this = this
					_this.$copyText(text).then(
						res => {
							uni.showToast({
								title: '复制成功',
								icon: 'none'
							})
						}
					)
				}
			},
			orderJump(index){ //订单跳转
				var headerIndex = 0
				if(index==0){ //待付款
					headerIndex = 1
				}else if(index==1){ //已完成
					headerIndex = 2
				}else if(index==2){ //已取消
					headerIndex = 3
				}else{ //权益卡订单
					headerIndex = 0
				}
				uni.navigateTo({
					url:'/pages/my/order/order?headerIndex=' + headerIndex
				})
			},
			//打开邀请码
			invitation() {
				this.$refs.child.open();
			},
			async getDonationShow() { // 按钮显示隐藏  1不显示 2显示
				var res = await getOperationConfiguration()
				var el = res.result
			    // this.accountValueShow = el.accountValue
				// NFR记录是否显示 1不显示 2显示
				if(el.nfrValue == 2) {
					this.functionNav[3].status = true
				}else{
					this.functionNav[3].status = false
				}
				// 神椰集市是否显示 1不显示 2显示
				if(el.commodityValue == 2) {
					 this.functionNav[0].status = true
				}else{
					 this.functionNav[0].status = false
				} 
			},
			commonFunctionsJump(item,index){ //常用功能跳转
				if (index == 2) {
					window.location.href = 'https://ddc.bsnbase.com/main/ddc-querys/query'
				} else if (item.url != '') {
					uni.navigateTo({
						url: item.url
					})
				}
			},
			otherFunctionsJump(index){ //其他功能跳转
				if(index==0){ //联系客服
					uni.navigateTo({
						url: "/pages/my/customer-service/customer-service"
					})
				}else if(index==1){ //关注公众号
					
				}else if(index==2){ //关于我们
					
				}else{ //设置
					uni.navigateTo({
						url: "/pages/my/set-up/set-up"
					})
				}
			},
		}
	}
</script>

<style scoped>
	page{
		background-color: #F2F5F8;
		height: 100%;
	}
	view{
		box-sizing: border-box;
	}
	.head{
		height: 494rpx;
		background-color: #141B29;
		padding: 58rpx 20rpx 0;
	}
	.head_main{
		width: 714rpx;
		height: 352rpx;
		position: relative;
	}
	.card_main{
		width: 100%;
		height: 100%;
	}
	.head_main_box{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		padding: 40rpx;
	}
	.head_main_box_h{
		display: flex;
		align-items: center;
	}
	.head_main_box_h_avant{
		width: 114rpx;
		height: 114rpx;
		background: url(/static/my/head_portrait.png) no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.head_portrait{
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		margin-top: 18rpx;
	}
	.name_text{
		font-size: 34rpx;
		color: #222222;
		margin: 0 22rpx 0 26rpx;
		font-weight: bold;
		max-width: 320rpx;
	}
	.real_name{
		width: 104rpx;
		height: 36rpx;
		border-radius: 100rpx;
		background: linear-gradient(90deg, #3970FF 0%, #FF3CE7 56.59%, #FFCA62 98.24%);
		font-size: 20rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 36rpx;
	}
	.wallet_box{
		display: flex;
		align-items: center;
	}
	.wallet_address{
		font-size: 26rpx;
		color: #FFFFFF;
		max-width: 560rpx;
	}
	.copy_icon_box{
		/* width: 100rpx; */
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.copy_icon{
		width: 44rpx;
		height: 43rpx;
		margin-left: 10rpx;
	}
	.content{
		position: relative;
		margin-top: -40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.content_nav{
		display: flex;
		align-items: center;
		height: 216rpx;
		border-radius: 40rpx;
		background-color: #FFFFFF;
		width: 100%;
		margin-bottom: 32rpx;
	}
	.content_nav_box{
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
		color: #222222;
	}
	.content_nav_box image{
		width: 52rpx;
		height: 52rpx;
		margin-bottom: 5rpx;
	}
	.split_line{
		width: 9rpx;
		height: 86rpx;
	}
	.advertisement{
		width: 710rpx;
		height: 126rpx;
		margin: 0rpx 0 40rpx;
	}
	.common_functions{
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 34rpx 20rpx 10rpx;
		margin-bottom: 30rpx;
	}
	.common_functions_title{
		font-size: 32rpx;
		color: #2C2A2F;
		margin-left: 12rpx;
		font-weight: bold;
	}
	.common_functions_nav{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #E7E7E7;
		padding: 32rpx 10rpx;
	}
	.common_functions_nav:last-child{
		border-bottom: 0;
	}
	.common_functions_nav_l{
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #2C2A2F;
		position: relative;
	}
	.red_dot{
		width: 16rpx;
		height: 16rpx;
		background-color: #EE3225;
		border-radius: 50%;
		position: absolute;
		top: 0;
		left: 28rpx;
		z-index: 1;
	}
	.common_functions_nav_l image{
		width: 44rpx;
		height: 44rpx;
		margin-right: 18rpx;
	}
	.common_functions_nav_r{
		font-size: 26rpx;
		color: #9F9F9F;
	}
	.common_functions_nav_r image{
		width: 22rpx;
		height: 20rpx;
		margin-left: 10rpx;
	}
	.other_function{
		display: flex;
		align-items: center;
		padding: 40rpx 0 34rpx;
	}
	.other_function_nav{
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 26rpx;
		color: #222222;
		width: 25%;
	}
	.other_function image{
		width: 56rpx;
		height: 56rpx;
		margin-bottom: 8rpx;
	}
</style>
